<template>
  <el-dialog
    title="新增菜单"
    :visible.sync="dialogVisible"
    :before-close="cancel"
    :close-on-click-modal="false"
    class="vc-dialog-form"
    width="480px">
    <el-form ref="addForm" :model="addForm" :rules="rules" label-width="100px" size="small">
      <el-form-item label="上级菜单" prop="pid">
        <el-tree-select
          v-model="addForm.pid"
          :data="orgTreeData"
          :props="defaultProps"
          clearable>
        </el-tree-select>
      </el-form-item>
      
      <el-form-item label="菜单名称" prop="name">
        <el-input v-model="addForm.name" maxlength="10" placeholder="请输入" clearable @clear="$refs.addForm.validateField('name')"></el-input>
      </el-form-item>

      <el-form-item label="菜单地址" prop="url">
        <el-input v-model="addForm.url" maxlength="500" placeholder="请输入" clearable @clear="$refs.addForm.validateField('url')"></el-input>
      </el-form-item>

      <el-form-item label="资源编码" prop="code">
        <el-input v-model="addForm.code" maxlength="30" placeholder="请输入" clearable @clear="$refs.addForm.validateField('code')"></el-input>
      </el-form-item>

      <el-form-item label="菜单图标" >
        <el-popover trigger="click" placement="bottom-start">
          <select-icon :currSelect="addForm.icon" @selected="selectedIcon"/>
          <el-input slot="reference" class="select-icon" placeholder="请选择" v-model="addForm.icon" clearable
                    id="addMenuIcon" @focus="focusIconInput">
            <template slot="append"><i :class="iconPrefix + addForm.icon"/></template>
          </el-input>
        </el-popover>
      </el-form-item>

      <el-form-item label="显示排序" prop="showOrder">
        <el-input v-model="addForm.showOrder" maxlength="5" placeholder="请输入" clearable @input="filterShowOrder"></el-input>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="cancel">取消</el-button>
      <el-button type="primary" size="small" :disabled="disabled" @click="save">保存</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { validateInput, validateHalfAngle } from '@/utils/validator';
import SelectIcon from './selectIcon';

export default {
  name: 'addMenu',
  components: { SelectIcon },
  props: ['dialogVisible', 'pid'],
  inject: ['iconPrefix'],
  data() {
    return {
      addForm: {
        pid: '',
        name: '',
        url: '',
        code: '',
        icon: '',
        showOrder: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入菜单名称', trigger: 'blur' },
          { validator: validateInput, trigger: 'blur' }
        ],
        url: [
          { required: true, message: '请输入菜单地址', trigger: 'blur' },
          { validator: validateInput, trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入资源编码', trigger: 'blur' },
          { validator: validateHalfAngle, trigger: 'blur' }
        ]
      },
      disabled: false,
      defaultProps: {
        id: 'id',
        label: 'name',
        children: 'children',
        isLeaf: 'isLeaf'
      }
    }
  },
  computed: {
    orgTreeData() {
      return this.$parent.orgTreeData || [];
    }
  },
  watch: {
    dialogVisible(val) {
      if (!val) return;
      this.disabled = false;
      this.$nextTick(() => {
        if (!this.$refs.addForm) return;
        this.$refs.addForm.resetFields();
        this.addForm.pid = this.pid;
        this.addForm.icon = '';
        setTimeout(() => { this.$refs.addForm.clearValidate(); }, 0);
      });
    }
  },
  methods: {
    /**
     * 保存
     */
    save() {
      if (this.disabled) {
        return;
      }
      this.$refs.addForm.validate((valid) => {
        if (!valid) {
          return false;
        }
        this.disabled = true;
        this.$api.addMenu({
          data: this.addForm
        }).then(res => {
          if (!res.success) {
            this.disabled = false;
            return;
          }
          this.$emit('close', res.data || {});
          this.$notifyBox('新增成功', 'success');
        }).catch(() => {
          this.disabled = false;
        });
      });
    },
    /**
     * 取消
     */
    cancel() {
      this.$emit('close', false);
    },
    /**
     * 选择图标-输入框获取焦点
     */
    focusIconInput() {
      $('#addMenuIcon').attr('readonly', true);
    },
    /**
     * 选择图标-赋值
     */
    selectedIcon(data) {
      this.addForm.icon = data;
      document.body.click();
    },
    /**
     * 过滤'显示排序'输入值
     */
    filterShowOrder(val) {
      this.addForm.showOrder = this.GLOBAL.filter.filterNaN(val);
    }
  }
}
</script>
